<template>
  <section
    class="blog"
    data-aos="fade-up"
    data-aos-easing="ease-in-out"
    data-aos-duration="500"
  >
    <div class="container">
      <div class="row">
        <div class="col-lg-12 entries">
          <article class="entry entry-single" v-if="content != null">
            <!-- <div class="entry-img">
              <img src="assets/img/blog-post-1.jpg" alt="" class="img-fluid" />
            </div> -->

            <h2 class="entry-title">
              {{ content.contentTitle }}
            </h2>

            <div class="entry-meta">
              <ul>
                <li class="d-flex align-items-center">
                  <i class="bi bi-person"></i>
                  {{ content.contentAuthor ? item.contentAuthor : "admin" }}
                </li>
                <li class="d-flex align-items-center">
                  <i class="bi bi-clock"></i>
                  {{ content.contentDatetime }}
                </li>
              </ul>
            </div>
            <!-- 正文 -->
            <div class="entry-content" v-html="content.contentDetails"></div>

            <div class="entry-footer clearfix">
              <button
                type="button"
                class="btn btn-outline-secondary"
                @click="back()"
              >
                返回
              </button>
            </div>
          </article>
          <!-- End blog entry -->
        </div>
        <!-- End blog entries list -->
      </div>
      <!-- End row -->
    </div>
    <!-- End container -->
  </section>
</template>

<script>
import { getArticleById } from "@/api/index.js";

import {
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  getCurrentInstance,
} from "vue";
export default {
  name: "",
  components: {},
  props: {
    id: Number,
  },
  setup(props) {
    const { proxy } = getCurrentInstance();

    const data = reactive({
      content: null,
    });
    const refData = toRefs(data);
    onBeforeMount(() => {});
    onMounted(() => {
      methods.getArticle();
    });
    const methods = {
      back: () => {
        proxy.$router.go(-1); //返回上一层
      },
      async getArticle() {
        var id = proxy.$route.params.id;
        let res = await getArticleById(id);
        if (res.code == 200) {
          data.content = res.data;
        } else {
          proxy.$router.replace("/404"); //返回上一层
        }
      },
    };
    return {
      ...refData,
      ...methods,
    };
  },
};
</script>
<style scoped></style>
